<template>
	<div class="vip_popup">
		<van-popup class="popup" v-model:show="show" style="background: none">
			<div class="popup_content">
				<template v-if="!state.showInfo">
					<div class="content">
						<div class="select_box">
							<template v-for="(item, index) of state.vipList" :key="item.id">
								<div
									class="select_item"
									:class="index == state.currentIndex ? 'select_item_active' : ''"
									@click="selectClick(index)"
								>
									<div class="tip">{{ item.title }}</div>
									<div class="select_item_content">
										<div class="top">
											<span>￥{{ item.price }}</span>
											<span>￥{{ item.dayPrice }}/天</span>
										</div>
										<div class="btm">
											原价<span>{{ item.old_price }}</span>
										</div>
									</div>
								</div>
							</template>
						</div>
						<div class="vip_btn">
							<img v-debounce="() => openVipPackage()" src="@/assets/img/vip_btn.png" />
<!--							<span @click="state.showInfo = true"-->
<!--								>开通会员 享更多权益<van-icon name="info-o" style="margin-left: 5px"-->
<!--							/></span>-->
              <span style="    width: 85%;" v-html="state.vipText"></span>
						</div>
					</div>
				</template>

				<template v-else>
					<div class="content2">
						<div class="title">
							<van-icon class="back_icon" name="arrow-left" size="18" @click="state.showInfo = false" />
							<span>VIP会员权益介绍</span>
						</div>
						<main>
							{{ state.vipText }}
						</main>
					</div>
				</template>
				<img class="close" src="@/assets/img/close_icon.png" @click="show = false" />
			</div>
		</van-popup>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { vipList } from '@/api/index';
import { globalConfigValue } from '@/api/common';
import { useMainStore } from '@/store/index';

const emit = defineEmits<{
	(event: 'openVipPackage', currentPackage: any): void;
}>();

interface IstateData {
	currentIndex: number;
	showInfo: boolean;
	vipList: any[];
	vipText: string;
}

const mainStore = useMainStore();
const state: IstateData = reactive({
	currentIndex: 0,
	showInfo: false,
	vipList: [],
	vipText: ''
});

onMounted(() => {
	gteVipList();
	getGlobalConfigValue();
});

const show = ref<boolean>(false);

const showPopup = () => {
	show.value = true;
};
const closePopup = () => {
	show.value = false;
};

const selectClick = (index: number) => {
	state.currentIndex = index;
};

// 立即开通
const openVipPackage = async () => {
	const currentPackage = state.vipList[state.currentIndex];
	emit('openVipPackage', currentPackage);
};
const infoClick = () => {
	console.log('文字');
};

const gteVipList = async () => {
	const res = await vipList();
	res.data.map((item: any) => {
		item.dayPrice = (Number(item.price) / item.day).toFixed(2);
	});
  res.data.map((item:any) => {
    item.price = parseFloat(item.price);
    item.old_price = parseFloat(item.old_price);
  })
	state.vipList = res.data;
};

// 获取vip说明
const getGlobalConfigValue = async () => {
	const res = await globalConfigValue('vip_contents');
	state.vipText = res.data.item_value;
};

defineExpose({ showPopup, closePopup });
</script>

<style lang="scss" scoped>
.vip_popup {
	.popup_content {
		@include flx-direction-center;
		.content {
			@include flx-center;
			position: relative;
			width: 332px;
			height: 540px;
			background-image: url('@/assets/img/video/vip_bg.png');
			//background-size: cover;
      background-size: 100%;
      background-repeat: no-repeat;
			.select_box {
				@include flx-justify-between;
				//margin-top: 40px;
				.select_item {
					@include flx-direction-center;
					padding: 0 4px;
					height: 90px;
          width: 75px;
					box-sizing: border-box;
					margin-right: 10px;
					border: 1px solid #f5d6b2;
					border-radius: 13px;
					background: #ffffff;
					&:last-child {
						margin-right: 0;
					}
					.tip {
						width: 42px;
						height: 18px;
						margin-top: -8px;
						border-radius: 5px;
						color: white;
						font-size: 10px;
						text-align: center;
						line-height: 18px;
						background: linear-gradient(91deg, #d69a35, #efbd71);
					}
					.select_item_content {
						@include flx-direction-between;
						align-items: center;
						height: 100%;
						color: #9f9f9f;
						font-size: 10px;
						.top {
							@include flx-direction-center;
							margin-top: 6px;
							color: #4a4949;
							font-size: 10px;
							span {
								&:first-child {
									color: #121212;
									font-size: 15px;
									font-weight: bold;
								}
								&:last-child {
									transform: scale(0.9);
								}
							}
						}
						.btm {
							margin-bottom: 5px;
							transform: scale(0.8);
							span {
								text-decoration: line-through;
							}
						}
					}
				}
				.select_item_active {
					border: 2px solid #f7458f;
					.tip {
						background: #f7458f;
					}
				}
			}

			.vip_btn {
				@include flx-direction-center;
				position: absolute;
				bottom: 52px;
				color: white;
				font-size: 10px;
				span {
					margin-top: -5px;
				}
				img {
					width: 208px;
					height: 63px;
				}
			}
		}

		.content2 {
			width: 295px;
			height: 400px;
			box-sizing: border-box;
			padding: 30px 25px;
			margin-bottom: 20px;
			box-shadow: 0px 0px 33px 0px rgba(158, 158, 158, 0.54);
			border-radius: 10px;
			background: #ffffff;
			.title {
				@include flx-center;
				position: relative;
				margin-bottom: 25px;
				font-weight: bold;
				.back_icon {
					position: absolute;
					top: 50%;
					left: 0;
					transform: translateY(-50%);
				}
			}
			main {
				overflow: scroll;
				height: 300px;
				font-size: 14px;
			}
		}
		.close {
			width: 28px;
			height: 28px;
		}
	}
}
</style>
